<template>
  <basic-container>
    <avue-crud :option="option"
               :data="data"
               :page="page"
               @on-load="onLoad"
               @size-change="sizeChange"
               @current-change="currentChange"
               @search-change="searchChange"
               @search-reset="searchReset">
      <template slot="search">
        <el-col :span="10" >
          <el-form-item label="会员名" style="display:inline-block;" >
            <el-input placeholder="请输入会员名"
                      size="mini"
                      v-model="searchForm.username" />
          </el-form-item>
          <el-form-item label="类型" style="display:inline-block;" > 
            <el-select v-model="searchForm.value"
                       size="mini"
                       placeholder="请选择类型">
              <el-option v-for="item in selectOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {
  getList
} from "@/api/base/member/integralLog";

import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["permission", 'userInfo']),
    permissionList () {
      return {
        addBtn: this.vaildData(this.permission["/mall-cloud-base/integralLog/addItem"], false),
        viewBtn: this.vaildData(this.permission["/mall-cloud-base/integralLog/detail"], false),
        delBtn: this.vaildData(this.permission["/mall-cloud-base/integralLog/delete"], false),
        editBtn: this.vaildData(this.permission["/mall-cloud-base/integralLog/editItem"], false)
      };
    },
  },
  data () {
    return {
      searchForm: {},
      data: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      option: {
        size:'mini',
        addBtn: false,
        searchBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        border: true,
        align: 'center',
        column: [
          {
            label: '会员名',
            prop: 'userName'
          },
          {
            label: '操作管理员',
            prop: 'operateUserId'
          },
          {
            label: '积分值',
            prop: 'integral'
          },
          {
            label: '操作时间',
            prop: 'addTime'
          },
          {
            label: '操作类型',
            prop: 'type'
          },
          {
            label: '描述',
            prop: 'content'
          },

        ]
      },
      selectOptions: [
        {
          value: '全部',
          label: '全部'
        },
        {
          value: '系统积分管理',
          label: '系统积分管理'
        },
        {
          value: '用户注册',
          label: '用户注册'
        },
        {
          value: '用户登录',
          label: '用户登录'
        },
        {
          value: '积分兑换',
          label: '积分兑换'
        },
        {
          value: '评价积分',
          label: '评价积分'
        },
        {
          value: '购物积分',
          label: '购物积分'
        },
      ],
    }
  },
  created () {
    //  初始化请求表结构
    getList().then(res => {
      if (res.status == 200) {
        this.data = [];
        this.data = res.data.data
      }
    })
  },
  methods: {
    searchChange (params,done) {
      this.onLoad(this.page, this.searchForm,done)
    },
    searchReset () {
      //清空方法
      this.searchForm = {}
    },
    beforeOpen (done, type) {
      if (["edit", "view"].includes(type)) {
        getList(this.form.modularName).then(res => {
          this.resucedata = [];
          this.form = res.data.data;
        });
      }
      done();
    },
  
    sizeChange (val) {
      this.page.pageSize = val
    },
    currentChange (val) {
      this.page.currentPage = val
      this.onLoad(this.page)
    },
    refreshChangeList() {
      this.onLoadList(this.page);
    },
    onLoad (page, params = {},done) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, params).then(res => {
        if (res.data.code == 200) {
          if(done){
            done();
          }
         this.loading = false;
         const data = res.data;
         this.page.total = data.count;
         this.data = data.data;
        }
      })
    },
  },
};
</script>

<style scoped>
.el-col-12 {
  width: 30% !important;
  
}

.avue-crud__menu {
  min-height: 40px;
  margin-bottom: 5px;
}
</style>
